<template>
    <div class="ReportHistory_div">
        <div class="components_title">
            <TitleTop>

            </TitleTop>

            <TitleMenu>
                <div slot="titleMenu_ico" @click="jumpBack()" >
                    <div class="title_left_ico">
                        <a-icon type="left" class="Group_ico" theme="outlined" />
                    </div>
                    <div class="title_left_text">返回</div>
                </div>
                <div slot="titleMenu_text" class="Homework_titleMenu_text">
                    <span>上报历史</span>
                </div>
                <div slot="titleMenu_add">
                    <a-icon type="sync" style="font-size: 7vw;" theme="outlined" :class="[rotate?'go':'aa']" @click="refresh" />
                </div>
            </TitleMenu>
        </div>
        <div id="ReportHistory_content" class="content_104class" v-loading="loading">
            <ul id="ReportHistory_ul" v-scroll="onScroll">
                <li class="ReportHistory_li animated fadeInLeft" v-for="reportInfo in myReportHistory" >
                    <a-row class="ReportHistory_ul_row">
                        <a-col :span="24" class="ReportHistory_li_center">
                            <div class="ReportHistory_li_topText">
                                {{reportInfo.fileName}}
                            </div>
                            <div class="ReportHistory_li_bottomText">
                                <div class="ReportHistory_li_createTime">{{reportInfo.createTime}}&nbsp;&nbsp;</div>
                                <div v-if="reportInfo.isOk==='1'" class="ReportHistory_li_rightTextOK">上传成功</div>
                                <div v-else class="ReportHistory_li_rightTextFail">上传失败</div>
                            </div>
                        </a-col>
                        <!--<a-col :span="7" class="ReportHistory_li_right">
                            <div class="ReportHistory_li_rightTextOK" v-if="reportInfo.isOk==='1'">
                                上传失败
                            </div>
                            <div class="ReportHistory_li_rightTextFail" v-if="reportInfo.isOk==='0'">
                                上传失败
                            </div>
                        </a-col>-->
                    </a-row>
                </li>

            </ul>
        </div>
        <FooterChaanel></FooterChaanel>
    </div>
</template>
<style>

    #ReportHistory_content{

    }
    #ReportHistory_ul{
        padding: 1vw 2vw 0 2vw;
        margin: 0;
        height: calc(100vh - 66vw);
        overflow: auto;
        background: rgb(237,237,237);
    }
    .ReportHistory_li  {
        width: 96vw;
        height: 16vw;
        margin:0 0 2vw 0 ;
        list-style: none;
        float: left;
        border-bottom: 0.3vw dashed grey;
    }
    .ReportHistory_ul_row{
        width: 96vw;
        height: 16vw;
    }
    .ReportHistory_li_center{
        height: 16vw;
        text-align: left;
    }
    .ReportHistory_li_topText{
        height: 9vw;
        line-height: 9vw;
        generic-family: "Microsoft YaHei";
        font-size: 5vw;
        color: black;
    }
    .ReportHistory_li_bottomText{
        height: 7vw;
        line-height: 4vw;
        font-size: 3.5vw;
    }
    .ReportHistory_li_right{
        height: 16px;
        line-height: 16vw;
        text-align: right;
        font-size: 6vw;
        generic-family: "Microsoft YaHei";
        padding: 0 1vw 0 0 ;
    }
    .ReportHistory_li_createTime{
        height: 7vw;
        line-height: 7vw;
        generic-family: "Microsoft YaHei";
        font-size: 5vw;
        color: #8F8F8F;
        float: left;
    }
    .ReportHistory_li_rightTextOK{
        height: 7vw;
        line-height: 7vw;
        generic-family: "Microsoft YaHei";
        font-size: 5vw;
        float: left;
        color: springgreen;
    }
    .ReportHistory_li_rightTextFail{
        height: 7vw;
        line-height: 7vw;
        generic-family: "Microsoft YaHei";
        font-size: 5vw;
        float: left;
        color: red;
    }

</style>
<script>
    import TitleTop from './../components/TitleTop'
    import TitleMenu from  './../components/TitleMenu'
    import ARow from "ant-design-vue/es/grid/Row";
    import ACol from "ant-design-vue/es/grid/Col";
    import FooterChaanel from "../components/FooterChaanel";
    import animated from 'animate.css';//animated动画类库
    import Vue from 'vue'
    Vue.use(animated);
    export default {
        name: "reportHistory",
        components:{FooterChaanel, ACol, ARow, TitleTop,TitleMenu},
        inject:['reload'],
        mounted(){
            /*setTimeout(()=> {
                this.filterOtherHistory();
            }, 1);*/
            this.filterOtherHistory();
        },
        data() {
            return {
                msg: 'hello vue',
                sid:localStorage.getItem("sid"),
                reportHistory:localStorage.getItem("reportHistory")?JSON.parse(localStorage.getItem("reportHistory")):[],
                myReportHistory:[],
                loading:true,
                rotate:false,
            }
        },methods:{
            filterOtherHistory(){
                /*let jsonArray = this.reportHistory;*/
                /*this.myReportHistory = this.reportHistory.filter(item => item.sid === this.sid);*/
               let myReportHistory_temp= this.reportHistory.filter(item => item.sid === this.sid);
               this.myReportHistory = myReportHistory_temp.reverse();
               this.loading = false;
            },
            onScroll(){
                this.handleScroll;
            },
            refresh(){
                this.clickButton();
                let me = this;
                me.rotate=!me.rotate;
                me.loading = true;
                setTimeout(function() {
                    me.reload();
                },1000)
            },
            jumpBack(){
              this.clickButton();
              this.$router.push('/homeWork');
            },
        }
    }
</script>

